<h3>描述</h3>
<p>弹框头部关闭按钮可自定义，标题也可定义位置</p>
<h3>示例</h3>
<ng-template #myModal let-context="context">
  <!-- 弹框头部自定义：此处自定义了弹框头部关闭按钮和头部对齐方式 -->
  <ti-modal-header>
    I'm a {{modalName}} modal!
    <span class="ti3-modal-close" (click)="context.dismiss()">跳过</span>
  </ti-modal-header>
  <!-- 弹框内容定义 -->
  <ti-modal-body> body content </ti-modal-body>
  <!-- 弹框底部定义:
        1.弹框样式可结合tiButton组件自定义，可根据是否设置color="danger"区分主要和次要按钮
        2.弹框的关闭事件需要自定义，其中close和dismiss事件是通过ng-template上下文传递的  -->
  <ti-modal-footer>
    <button type="button" color="danger" autofocus (click)="context.close()" tiButton>OK</button>
    <button type="button" (click)="context.dismiss()" tiButton>Cancel</button>
  </ti-modal-footer>
</ng-template>

<!-- 打开弹窗，可在事件中传递模板变量方便JS获取弹框模板 -->
<button (click)="show(myModal)" tiButton>show Modal</button>
